<template>
	<view class="trace uni-padding-wrap uni-common-mt">
		<view class="form form-a">
			<view class="form-group">
				<block v-for="(item, index) in reportData" :key="index">
					<view class="form-item" :class="{'search-wrap': item.type == 'search', 'form-item-hor': item.type == 'select' || item.type == 'switch'}">
						<view class="form-item-header" v-if="item.type !== 'search'">{{ item.label}}：</view>
						<view class="form-item-body">
							<view v-if="item.type == 'upload'" class="list list-p">
								<view class="list-group">
									<view class="list-item" v-for="(baseImage, ind) in item.images" :key="ind">
										<view class="card card-a" @tap="viewPic(item,ind)">
											<view class="card-header">
											</view>
											<view class="delete" @tap.stop.prevent="delPic(item,ind)">
												<image class="icon" mode="aspectFit"
													src="@/static/icon/delete-icon.png">
												</image>
											</view>
											<view class="card-body">
												<image class="icon" mode="aspectFit" :src="baseImage"></image>
											</view>
										</view>
									</view>
							
									<view class="list-item">
										<view class="card card-a upload" @tap="getPic(item)">
											<view class="card-body">
												<image class="icon" mode="aspectFit"
													src="@/static/icon/iv_pic_add.png"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view v-else-if="item.type == 'switch'" class="switch">
								<switch :checked="item.value" @change="switchChange($event, item.field)"/>
							</view>
							
							<textarea v-else 
								class="form-control form-control-a" 
								v-model="item.value" 
								@input="changeLength($event, item.field)" 
								maxlength="250" 
								:placeholder="`请输入${item.label}`">
								</textarea>
						</view>
					</view>
					
					<view class="form-item-tip" v-if="item.tips">
						{{item.tips}}
					</view>
					
				</block>
			</view>
		</view>
		
		<view class="btns">
			<view class="btns-group">
				<button class="btn btn-a" @tap="report">提交</button>
			</view>
		</view>
	</view>
</template>
<script>
import {traceEvent} from '@/api/configure.js';
import { deepClone ,mergeUrls, getUserInfo, formatDateStr ,getBaseImages, previewImage, chooseImage, getRoutes} from '@/util/util.js';
import { pathToBase64, base64ToPath } from '@/util/mmmm-image-tools/index.js';
import configUrl from '@/util/url.js';
export default {
	data() {
		return {
			userId: '',
			roleKey: '',
			eventId: '',
			reportData:[{
				type: 'switch',
				field: 'compress',
				label: '压缩图片',
				value: true
			},{
				type: 'upload',
				field: 'images',
				label: '拍照',
				value: '',
				images: [],
				baseImages: [],
				tips: ''
			},{
				type: 'textarea',
				field: 'eventDescribe',
				label: '追踪描述',
				value: '',
				tips: '*字数限制250,剩余字数250/250'
			}, ]
		}
	},
	methods: {
		changeLength(e, field) {
			let tipsItem = this.reportData.find(item => item.field == field);
			
			tipsItem.tips = `*字数限制250,剩余字数${250 -(tipsItem.value.length) > 0 ? 250 -(tipsItem.value.length) : 0 }/250`
		},
		switchChange(e, field) {
			let compressedItem = this.reportData.find(item => item.field == field);
			
			compressedItem.value = e.detail.value;
		},
		async getPic(obj) {
			let compressedItem = this.reportData.find(item => item.field == 'compress');
			let isCompressed = compressedItem.value;
			
			let res = await chooseImage({}, isCompressed).catch((err) => {});
			
			if(res) {
				let tempFilePaths = res.tempFilePaths.slice(0);
				obj.images = obj.images.concat(tempFilePaths);
				
				let baseImages = await getBaseImages(tempFilePaths);
				obj.baseImages = obj.baseImages.concat(baseImages);
			}
		},
		delPic(obj, index) {
			obj.images.splice(index, 1);
			obj.baseImages.splice(index, 1);
		},
		viewPic(obj, index) {
			previewImage({
				urls: obj.images,
				current: index
			})
		},
		async report() {
			let params = {
				eventId: this.eventId,
				createUser: this.userId,
				eventDescribe: '', //追踪描述
				images: ''
			}
			
			let images = this.reportData.find( item => item.field == 'images');
			let baseImages = images.baseImages.map(item => ({image: item.split(',')[1]}))
			
			params['images'] = JSON.stringify(baseImages);
			
			let eventDescribe = this.reportData.find( item => item.field == 'eventDescribe');
			
			params['eventDescribe'] = eventDescribe.value;
			
			let { code } = await traceEvent(params);
			
			if(code == 0){
				uni.showToast({
				    title: '提交成功',
				    duration: 2000,
					icon: 'none'
				});
				
				
				let routes = getRoutes();
				
				if (routes.includes('pages/case/case')) {
					uni.$emit('case.case.refresh');
				} 
				
				setTimeout(()=> {
					uni.navigateBack({
					    delta: 1
					});
				}, 2000);
			}
		},
		back() {
		    uni.navigateBack({  
		        delta: 1
		    });  
		},
		init() {
			let userInfo = getUserInfo();
						
			if (userInfo) {
				this.userId = userInfo['userId'];
				this.roleKey = userInfo['roles'][0]['roleKey'];
			}
		}
	},
	onLoad(option) {
		this.eventId = option.eventId;
		
		this.init()
	},
	onUnload() {},
	onBackPress(options) {
		let _this = this;
		
		if (options.from === 'navigateBack') {  
			return false;  
		}  
		
		uni.showModal({
		    content: '确定退出当前页面吗？',
		    success(res) {
		        if (res.confirm) {
		           _this.back();  
		        } else if (res.cancel) {
		          
		        }
		    }
		});
				   
		return true;  
	}
}
</script>

<style lang="scss">
	.trace{
		padding-bottom: 100rpx;
	}
	.form {}
	.form-a {
		margin-bottom: 60rpx;
		.form-group {
			padding: 0rpx 30rpx;
			.form-item {
				margin-bottom: 40rpx;
				.form-item-header {
					margin-bottom: 20rpx;
					padding: 13rpx 0rpx 13rpx 0rpx;
					font-size: 28rpx;
					line-height: 120%;
					color: #5d5d5d;
				}
	
				.form-item-body {
					padding: 0rpx 0rpx 0rpx 0rpx;
	
					.form-control-static {
						min-height: 200rpx;
						padding: 20rpx;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						background-color: #ececec;
						box-sizing: border-box;
					}
	
					.form-control {
						width: 100%;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						box-sizing: border-box;
						border: 1px solid #c4c4c4;
						height: 56rpx;
						padding: 6rpx 16rpx;
	
						&.form-control-a {
							height: 200rpx;
							padding: 20rpx;
						}
					}
				}
	
				&.form-item-hor {
					display: flex;
					.form-item-header {
						width: 140rpx;
						box-sizing: border-box;
						margin-bottom: 0rpx;
					}
	
					.form-item-body {
						padding: 0rpx 0rpx 0rpx 0rpx;
						width: calc(100% - 140rpx);
						box-sizing: border-box;
					}
				}
			}
	
			.form-item-tip {
				padding: 8rpx 0rpx;
				font-size: 28rpx;
				line-height: 120%;
				color: #d81e06;
			}
		}
	}
	
	.btns {
		background-color: #ffffff;
	
		.btns-group {
			padding: 17rpx 30rpx;
			display: flex;
	
			.btns-item {
				width: 50%;
				padding: 0rpx 10rpx;
			}
		}
	
	}
	
	.btn {
		width: 100%;
		padding: 20rpx 0px;
		font-size: 24rpx;
		line-height: 120%;
		color: #fff;
		text-align: center;
		border: none;
		border-radius: 6rpx;
		background: none;
	
		&:after {
			display: none;
		}
	
		&.btn-a {
			background-color: #f29004;
		}
	}
	
	
	.card {}
	
	.card-a {
		width: 200rpx;
		margin: 0rpx auto;
		border-radius: 5rpx;
		border: 1rpx solid #a2a2a2;
		position: relative;
		top: 0rpx;
		left: 0rpx;
	
		.card-body {
			height: 143rpx;
	
			.icon {
				width: 100%;
				height: 100%;
			}
		}
	
		&.upload {
			border: none;
		}
	
		.card-header {
			width: 100%;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			background-color: #000000;
			opacity: 0.3;
			z-index: 2;
		}
	
		.delete {
			width: 31rpx;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 3;
			display: flex;
			justify-content: center;
			align-items: center;
	
			.icon {
				width: 20rpx;
				height: 20rpx;
			}
		}
	
	}
	
	.list {
		&.list-p {
			.list-group {
				display: flex;
				flex-wrap: wrap;
	
				.list-item {
					margin-bottom: 20rpx;
					width: 33.33%;
				}
			}
		}
		&.list-types{
			width: 600rpx;
			background-color: #ffffff;
			.list-group{
				padding: 20rpx 0rpx 0rpx;
				.list-item{
					margin-bottom: 10rpx;
					position: relative;
					top: 0rpx;
					left: 0rpx;
					&:after{
						content: '';
						background-color: #999;
						opacity: 0.5;
						height: 1rpx;
						position: absolute;
						right: 20rpx;
						bottom: 0rpx;
						left: 20rpx;
					}
					
					.list-item-btn{
						padding: 13rpx 20rpx;
						font-size: 28rpx;
						line-height: 120%;
						color: #5d5d5d;
					}
				}
			}
		}
	}
	
	.switch{
		height: 57rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}
	
	/deep/ .uni-switch-input{
		height: 22px;
		&:after{
			height: 20px;
		}
		&:before{
			height: 20px;
		}
	}
</style>
